<template>
    <div>
<ul class="menu">
    <!-- 一般为了样式错误，在根设置严格 exact -->
    <router-link to="/films" active-class="active" tag="li">
    <i class="iconfont icon-dianying"></i>
    <p>电影</p>
    </router-link>
    <router-link  to="/cinema" active-class="active" tag="li">
    <i class="iconfont icon-yingyuan"></i>
    <p>影院</p>
    
    </router-link>
    <router-link  to="/about" active-class="active"  tag="li">
    <i class="iconfont icon-zixun"></i>
    <p>资讯</p>
    </router-link>
    <router-link to="/center" active-class="active"  tag="li">
    <i class="iconfont icon-wode"></i>
    <p>我的</p>
    </router-link>


</ul>
    </div>
</template>
<script>
//将iconfont放到静态文件夹，然后引入
import '../../assets/font/iconfont.css'
export default {
    
}
</script>
<style lang="scss" scoped>
.menu{
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 50px;
   display: flex;
   align-items: center;
   border-top:solid 1px #333;
   text-align: center;
   background: white;
   li{
    flex: 1;
    &.active{
      color: #ef5500;
    }
    i {
        font-size: 20px;
    }
}
}

</style>